<template>
	<view class="mortgage">
		<navbar title="房贷计算"></navbar>
		<view style="padding: 0 30rpx;">
			
			<view class="acea-row item">
				<view class="title">还贷方式</view>
				<view class="acea-row row-between row-middle" style="flex:1;">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="select">{{array[index]}}</view>
					</picker>
					<view class="iconfont icon-xiangyou"></view>
				</view>
			</view>
			
			<view class="acea-row item">
				<view class="title">贷款利率（%）</view>
				<view>
					<input type="text" placeholder="请输入贷款利率" placeholder-style="color:#888888;font-size:28rpx;">
				</view>
			</view>
			<view class="acea-row item">
				<view class="title">贷款年限（年）</view>
				<view>
					<input type="text" placeholder="请输入贷款年限" placeholder-style="color:#888888;font-size:28rpx;">
				</view>
			</view>
			<view class="acea-row item">
				<view class="title">贷款额度（元）</view>
				<view>
					<input type="text" placeholder="请输入贷款额度" placeholder-style="color:#888888;font-size:28rpx;">
				</view>
			</view>
		</view>
		
		<view class="compent">计算</view>
		
		
	</view>
</template>

<script>
	import navbar from '../../components/navbar.vue'
	export default {
		components:{
			navbar
		},
		data() {
			return {
				array:['请选择还款方式'],
				index:0,
				
				
			};
		},
		methods:{
			bindPickerChange(e){
				
			}
		}
	}
</script>

<style lang="scss">
	.mortgage{
		
		.item{
			padding: 30rpx 0;
			border-bottom: 1rpx solid #d1d1d1;
			
			.title{
				color: #666666;
				font-size: 28rpx;
				width: 250rpx;
			}
			
			.select{
				font-size: 28rpx;
			}
			.icon-xiangyou{
				color: #888888;
			}
			
		}
		
		.compent{
			width: 620rpx;
			line-height: 90rpx;
			text-align: center;
			color: #ffffff;
			font-size: 30rpx;
			background-color: #2F65DF;
			border-radius: 40rpx;
			margin: 70rpx auto;
		}
		

		
		
		
		
	}


</style>
